<template>
  <div class="i-box">
    <nav-bar hint="导航栏">
      <div slot="middle">房贷计算结果</div>
      <img class="top-back-icon" src="@res/img/common_back.png" alt="" slot="left" @click="back">
    </nav-bar>

    <cube-tab-bar
      class="i-cube"
      hint="切换还款方式"
      v-model="selectedLabelDefault"
      :data="tabs"
      show-slider
      @click="clickHandler"
    />

    <div class="i-content">
      <div class="i-summary" hint="汇总栏目">
        <data-item class="i-big-area" :title="monthPayTip" :value="allFirstPay" color="#fff" :scale="true"/>
        <div class="i-row">
          <data-item class="i-row-item" :title="iInterest" :value="allInterest" color="#fff"/>
          <div class="i-divider"></div>
          <data-item class="i-row-item" :title="iTotal" :value="allPaid" color="#fff"/>
        </div>
      </div>

      <div class="i-summary-gong" hint="公积金内容" v-show="isGong">
        <div class="i-label">{{iGong}}</div>
        <div class="i-row">
          <data-item class="i-row-item" :title="iLoan" :value="gong.money.toFixed(2)"/>
          <div class="i-divider2"></div>
          <data-item class="i-row-item" :title="iTimes" :value="gong.timeText"/>
        </div>
      </div>
      <div class="i-summary-bus" hint="商业贷内容" v-show="isBus">
        <div class="i-label">{{iBus}}</div>
        <div class="i-row">
          <data-item class="i-row-item" :title="iLoan" :value="bus.money.toFixed(2)"/>
          <div class="i-divider2"></div>
          <data-item class="i-row-item" :title="iTimes" :value="bus.timeText"/>
        </div>
      </div>

      <div class="i-summary-combine" hint="组合贷内容" v-show="isCombine">
        <div class="i-label">{{iBus}}</div>
        <div class="i-combine-item">
          <data-item class="i-big-area" :title="monthPayTip" :value="bus.firstPay.toFixed(2)" :scale="true"/>
          <div class="i-row">
            <data-item class="i-row-item" :title="iLoan" :value="bus.money.toFixed(2)"/>
            <div class="i-divider2"></div>
            <data-item class="i-row-item" :title="iTimes" :value="bus.timeText"/>
          </div>
          <div class="i-row">
            <data-item class="i-row-item" :title="iInterest" :value="bus.interest.toFixed(2)"/>
            <div class="i-divider"></div>
            <data-item class="i-row-item" :title="iTotal" :value="bus.total.toFixed(2)"/>
          </div>
          <div class="i-label">{{iGong}}</div>
          <div class="i-combine-item">
            <data-item class="i-big-area" :title="monthPayTip" :value="gong.firstPay.toFixed(2)" :scale="true"/>
            <div class="i-row">
              <data-item class="i-row-item" :title="iLoan" :value="gong.money.toFixed(2)"/>
              <div class="i-divider2"></div>
              <data-item class="i-row-item" :title="iTimes" :value="gong.timeText"/>
            </div>
            <div class="i-row">
              <data-item class="i-row-item" :title="iInterest" :value="gong.interest.toFixed(2)"/>
              <div class="i-divider"></div>
              <data-item class="i-row-item" :title="iTotal" :value="gong.total.toFixed(2)"/>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="gi-text-tip">以上结果仅供参考，具体以当地情况为准</div>
    <submit-button class="i-submit" @submit="submit" tip="查看月供情况"></submit-button>
  </div>
</template>

<script>
  import NavBar from "@/components/common/NavBar";
  import DataItem from "@/components/house/DataItem";
  import SubmitButton from "@/components/common/SubmitButton";

  export default {
    name: "LoanResult",
    data() {
      return {
        tabs: [{
          label: '等额本息',
        }, {
          label: '等额本金',
        }],
        selectedLabelDefault: '等额本息',
        iInterest: '利息总额(万元)',
        iTotal: '还款总额(万元)',
        iLoan: '贷款金额(万元)',
        iTimes: '贷款期限',
        iGong: '公积金贷款',
        iBus: '商业贷款',
        iCombine: '组合贷款',
        type: '0',
        gong: {
          money: 0,
          rate: 0,
          times: 0,
          interest: 0,
          total: 0,
          timeText: '0年(0期)',
          firstPay: 0
        },
        bus: {
          money: 0,//贷款本金
          rate: 0,
          times: 0,
          interest: 0,//总利息
          total: 0,//总还款
          timeText: '1年(0期)',
          firstPay: 0
        },
        benXi: {
          bMonths: [//商贷月供详情列表
          ],
          gMonths: [//公积金月供详情列表
          ],
        },
        benJin: {
          bMonths: [//商贷月供详情列表
          ],
          gMonths: [//公积金月供详情列表
          ],
        },

      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      clickHandler(label) {
        if (label === '等额本息') {
          this.type = '0'
        } else {
          this.type = '1'
        }
        this.calculate()
      },
      submit() {
        let gong = this.benXi.gMonths
        let bus = this.benXi.bMonths
        if (this.selectedLabelDefault !== '等额本息') {
          gong = this.benJin.gMonths
          bus = this.benJin.bMonths
        }
        this.$router.push({
          name: 'HouseMonthly',
          params: {
            gong, bus
          }
        })
      },
      calType0(cate) {
        //等额本息计算
        let mR = this[cate].rate / 1200 //月利率
        let pcount = this[cate].times * 12
        let tmp = Math.pow((1 + mR), pcount)
        let eMoney = (this[cate].money * mR * tmp) / (tmp - 1)
        this[cate].firstPay = (eMoney * 10000)
        this[cate].total = (eMoney * pcount)
        this[cate].interest = (this[cate].total - this[cate].money)
        let p = this[cate].times * 12
        this[cate].timeText = this[cate].times + '年' + '(' + p + '期)'
        let key = (cate === 'gong') ? 'gMonths' : 'bMonths'
        this.benXi[key] = []
        let eMoneyYuan = eMoney * 10000
        //计算月供
        for (let i = 0; this[cate].money > 0 && i < pcount; i++) {
          let item = {}
          //月还款额
          let eachTotal = eMoneyYuan
          //当前总计已还
          let already = eMoneyYuan * (i + 1)
          //总剩余金额
          let rest = pcount * eachTotal - already
          //剩余本金
          let restBase = 0
          //每月利息
          let eachAdd = 0
          //每月本金
          let eachBase = 0
          if (i === 0) {
            //每月利息=剩余本金*月利率
            eachAdd = this[cate].money * mR * 10000
            //每月本金=每月应还-每月利息
            eachBase = eachTotal - eachAdd
            //首月剩余本金 = 总本金 - 当月已还本金
            restBase = this[cate].money * 10000 - eachBase
          } else {
            //每月利息=剩余本金*月利率
            eachAdd = this.benXi[key][i - 1].restBase * mR
            //每月本金=每月应还-每月利息
            eachBase = eachTotal - eachAdd
            //首月剩余本金 = 总本金 - 当月已还本金
            restBase = this.benXi[key][i - 1].restBase - eachBase
          }
          item.month = i + 1
          item.add = eachAdd
          item.base = eachBase
          item.total = eachTotal
          item.rest = rest
          item.restBase = restBase
          this.benXi[key].push(item)
        }
      },
      calType1(cate) {
        //等额本金计算
        let mR = this[cate].rate / 1200
        let pcount = this[cate].times * 12
        let b = this[cate].money / pcount * 10000//每月本金
        let t = this[cate].money * mR * 10000//首月利息
        this[cate].firstPay = b + t
        let p = this[cate].times * 12
        this[cate].timeText = this[cate].times + '年' + '(' + p + '期)'
        this[cate].interest = mR / 2 * this[cate].money * (pcount + 1)
        this[cate].total = this[cate].interest + this[cate].money
        let key = (cate === 'gong') ? 'gMonths' : 'bMonths'
        this.benJin[key] = []
        //总计应还
        let totalYuan = 10000 * this[cate].total
        //每月本金
        let eMoneyYuanBase = b
        //剩余本金
        let restBase = this[cate].money * 10000
        //累计已还
        let already = 0
        //每月利息
        for (let i = 0; this[cate].money > 0 && i < pcount; i++) {
          let eachAdd = restBase * mR
          let eachMoney = eachAdd + eMoneyYuanBase
          already = already + eachMoney
          restBase = restBase- eMoneyYuanBase
          let item = {}
          item.month = i + 1
          item.add = eachAdd
          item.base = eMoneyYuanBase
          item.total = eachMoney
          item.rest = totalYuan - already
          this.benJin[key].push(item)
        }
      },
      calculate() {
        if (this.type === '0') {
          this.selectedLabelDefault = "等额本息"
          if (!this.isGong) {
            this.calType0('bus')
          }
          if (!this.isBus) {
            this.calType0('gong')
          }
        } else {
          this.selectedLabelDefault = "等额本金"
          console.log("等额本金");
          if (!this.isGong) {
            this.calType1('bus')
          }
          if (!this.isBus) {
            this.calType1('gong')
          }
        }
      }

    },
    components: {
      NavBar,
      DataItem,
      SubmitButton
    },
    created() {
      let p = this.$route.params
      if (!(p.gMoney) && !(p.bMoney)) {
        p = this.$store.state.loanParams
        if (!(p.gMoney) && !(p.bMoney)) {
          this.$router.replace("/")
          return
        }
      } else {
        this.$store.commit("newLoanParams", p)
      }
      this.gong.money = p.gMoney
      this.gong.rate = p.gRate
      this.gong.times = p.gTimes
      this.type = p.type
      this.bus.money = p.bMoney
      this.bus.rate = p.bRate
      this.bus.times = p.bTimes
      this.calculate()
    },
    computed: {
      isBus() {
        return (this.gong.money === 0 && this.bus.money !== 0)
      },
      isGong() {
        return (this.gong.money !== 0 && this.bus.money === 0)
      },
      isCombine() {
        return (this.gong.money !== 0 && this.bus.money !== 0)
      },
      allInterest() {
        return (this.gong.interest + this.bus.interest).toFixed(2)
      },
      allPaid() {
        return (this.gong.total + this.bus.total).toFixed(2)
      },
      allFirstPay() {
        return (this.gong.firstPay + this.bus.firstPay).toFixed(2)
      },
      monthPayTip() {
        if (this.type === '0') {
          return '每月还款(元)'
        } else {
          return '首月还款(元) (逐月金额递减)'
        }
      }

    }
  }
</script>

<style scoped>
  .i-cube {
    padding: 0.4rem 0;
  }

  .i-summary {
    background-color: var(--color-tint);
    padding: 1rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .i-row {
    display: flex;
    margin-top: 1rem;
    justify-content: space-between;
    padding: 1rem 2rem;
  }

  .i-row-item {
    flex: 1
  }

  .i-divider {
    height: 4rem;
    background-color: var(--color-divider-white);
    width: 1px;
    line-height: 4rem;
    margin-right: 1rem;
  }

  .i-divider2 {
    height: 4rem;
    background-color: var(--color-divider);
    width: 1px;
    line-height: 4rem;
    margin-right: 1rem;
  }

  .i-summary-gong {
  }

  .i-label {
    height: 4rem;
    line-height: 4rem;
    padding-left: 2rem;
    text-align: left;
    background-color: var(--color-bg-gray);
    color: gray;
    font-size: 1.3rem;
  }

  .i-big-area {
    padding-left: 2rem;
  }

  .i-combine-item {
    padding: 1rem 0rem;
  }


</style>
<style>
  .cube-tab_active > div {
    color: var(--color-high-text);
  }

  .i-cube > .cube-tab-bar-slider {
    box-sizing: border-box;
    background-color: var(--color-high-text);
  }

</style>
